<template>  
  <Chart :height="height" :option="chartOption" />  
</template>  
  
<script setup>  
import Chart from "@/components/charts/index.vue";  
import useChartOption from '@/hooks/charts';  
import { ref } from 'vue';  
import { storeToRefs } from "pinia";  
import { useAppStore } from '@/pinia';  
  
const appStore = useAppStore();  
const { config } = storeToRefs(appStore);  
  
const props = defineProps({  
  height: {  
    type: String,  
    default: '400px', // Adjust height for bar chart  
  },  
  data: {  
    type: Array,  
    default: () => []  
  }  
});  


const primaryColor = '#0065ff';  
  
const { chartOption } = useChartOption(() => {  
  return {  
    tooltip: {  
      trigger: 'axis',  
      axisPointer: {  
        type: 'shadow'  
      }  
    },  
    xAxis: {  
      type: 'value',  
      boundaryGap: ["20%", "20%"] 
    },  
    yAxis: {  
      type: 'category',  
      data: props.data.map(item => item.name)  
    },  
    series: [  
      {  
        name: '数据',  
        type: 'bar',  
        barWidth:12,
        barGap:2,
        data: props.data.map(item => ({  
          value: item.value,  
          itemStyle: { color: primaryColor}  
        })),  
        label: {  
          show: true,  
          position: 'right',  
          formatter: '{c}'  
        }  
      }  
    ]  
  };  
});  
</script>  
  
<style scoped lang="scss">  
</style>